var ConstellationItemView = function() {
	var self = this;
	this.rect = 0;
	this.group = 0 
	this.center = new Point()
	this.path = {}
	this.model = {};
	this.part = 0;
	this.rolledover = new signals.Signal();
	this.rolledout = new signals.Signal();
	this.cursor = null;


 	this.animate = function(model, delay) {
 		self.group = new Group();
 		TweenMax.to(self.group, 0.1, {opacity:0})
 		var p = new Path();
 		var c = new Color(random(0,1),random(0,1),random(0,1));
 		p.strokeColor = c;
 		p.strokeWidth = 0.6;
 		p.saturation = 0.1
 		
 		self.path = p;
 		self.path.strokeColor = "#"+model.color

 		self.model = model
 		var id = model.stars[self.part]
 		var star = project.activeLayer.children[id]
 		if(star == undefined) return

 		self.group.onMouseEnter = function(event) {
 			self.rolledover.dispatch(self);
 		};

 		self.group.onMouseLeave = function(event) {
 			self.rolledout.dispatch(self);
 		};

 		var el = document.createElement("img");
 		el.src = "/assets/images/cursor.png";
 		el.id = id;
 		document.body.appendChild(el);

 		self.cursor = new Raster(id);
 		// self.cursor.scale(1);
 		$(el).remove()
 		
 		TweenMax.to(self.cursor.position, 0, {x:  -200 });

 		if(star)TweenMax.to(self.cursor.position, 1, {x:  star.position.x +2 ,y:  star.position.y+2, onComplete:self.drawNext, delay:delay});

 	}

 	this.init = function(model) {
 		self.group = new Group();
 		TweenMax.to(self.group, 0.1, {opacity:0})
 		var p = new Path();
 		var c = new Color(random(0,1),random(0,1),random(0,1));
 		p.strokeColor = c;
 		p.strokeWidth = 0.6;
 		p.saturation = 0.1
 		
 		self.path = p;
 		self.path.strokeColor = "#"+model.color

 		self.model = model
 		var id = model.stars[self.part]
 		var star = project.activeLayer.children[id]
 		if(star == undefined) return

 		self.group.onMouseEnter = function(event) {
 			self.rolledover.dispatch(self);
 		};

 		self.group.onMouseLeave = function(event) {
 			self.rolledout.dispatch(self);
 		};

 		
 		

 		for (var i = 0; i < self.model.stars.length; i++) {
 			var id = self.model.stars[i]
 			var star = project.activeLayer.children[id]
 			self.path.add(star.position);
 		};
 		
 		self.finish()
 	}

 	this.lock = function(b) {
 		self.group.locked = b
 	}

 	this.drawNext = function() {
 		var id = self.model.stars[self.part]
 		var star = project.activeLayer.children[id]
 		self.path.add(star.position);
 		

 		self.part++
 		if(self.part >= self.model.stars.length){
 			self.finish()
 			return
 		}
 		var id = self.model.stars[self.part]
 		var star = project.activeLayer.children[id]
 		if(star == undefined){
 			self.finish()
 			return	
 		} 

	 	TweenMax.to(self.cursor.position, random(0.4,.7), {x: star.position.x +5 ,y:  star.position.y + 6, onComplete:self.drawNext});
	}
	
    this.finish = function() {
 		// paper.view.draw();
    	self.rect = new Path.Rectangle(self.path.handleBounds);
    	self.rect.scale(1.2, 1.2)
    	self.rect.strokeColor = '#e9e9ff';
		self.rect.strokeWidth = 0.3;
		self.rect.fillColor = new Color(0, 0, 0,0);

		var tname = new PointText({
			point: self.path.handleBounds.center,
			justification: 'center',
			font: 'Roboto',
			fontSize: 11,
			fillColor: 'white'
		});
		
		tname.content = self.model.name

		var bg1 = new Path.Rectangle(tname.handleBounds);
    	bg1.fillColor = '#000000';

		var tuser = new PointText({
			point: self.path.handleBounds.center,
			font: 'Roboto',
			justification: 'center',
			fontSize: 11,
			fillColor: 'white'
		});

		

		tuser.point.y += 14
		tuser.content = 'by ' + self.model.username 

		var bg2 = new Path.Rectangle(tuser.handleBounds);
    	bg2.fillColor = '#000000';

		self.group.addChild(self.rect)
		self.group.addChild(bg1)
		self.group.addChild(bg2)
		self.group.addChild(tname)
		self.group.addChild(tuser)
		bg1.locked = true
		bg2.locked = true
		tname.locked = true
		tuser.locked = true

		
		// paper.view.draw()
		self.path.locked = true;
		self.out()
		
   		
    	if(self.cursor) self.cursor.remove();
    }

    this.print  = function () {
    	var print = new Group();
    	TweenMax.to(self.group, 0, {opacity:1})
    	TweenMax.to(self.path, 0, {opacity:1, strokeWidth:2})
	   	self.rect.fillColor = new Color(0, 0, 0,1);
    	print.addChild(self.rect.clone())
    	self.rect.fillColor = new Color(0, 0, 0,0);
    	

     	print.addChild(self.path.clone())
    	print.addChild(self.group.clone())
    	
    	var leRaster = print.rasterize()
    	// console.log('this is the raster', leRaster.toDataURL())
    	var file =  leRaster.toDataURL()
    	leRaster.remove()
    	print.remove()
    	self.remove()
    	// file.sendToBack();
    	return file
    }
    this.remove = function() {
    	self.group.remove()
    	self.path.remove()
    }


    this.over = function(event) {
    	self.group.bringToFront();
		TweenMax.to(self.group,.4, {opacity:.9})
		TweenMax.to(self.path, 0.2, {opacity:1, strokeWidth:2})
    }

    this.out = function(event) {
    	// self.group.sendToBack();
		TweenMax.to(self.group, 0.4, {opacity:0})
		TweenMax.to(self.path, 0.4, {opacity:1, strokeWidth:.6})
    }

    this.dimdown = function(event) {
		TweenMax.to(self.path, 0.4, {opacity:.3})
    }
    
    return this

}
